<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="410px"
    @close="$emit('update:visible',false)"
    center
  >
    <div style="text-align: center">
      <el-upload
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple
        :on-success="onUploadSuccess"
        :on-error="onUploadError"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          {{ tip }}
          <a href="#" target="_blank" class="btn-link">下载模板</a>
        </div>
      </el-upload>
    </div>
  </el-dialog>
</template>

<script>
/**
 * 文件上传对话框
 */
export default {
  name: "ExcelUploadDialog",
  emits: ["uploaded"],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // 是否支持多选文件
    multiple: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "导入数据",
    },
    // 提示信息: 只能上传jpg/png文件，且不超过500kb
    tip: {
      type: String,
      default: "只能上传xls、xlsx文件",
    },
    // 上传文件服务端处理地址
    actionUrl: {
      type: String,
      default: "",
    },
    // 上传的文件字段名
    name: {
      type: String,
      default: "file",
    },
    // 设置上传的请求头部
    headers: {
      type: Object,
      default() {
        return {};
      },
    },
    // 上传时附带的额外参数
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    // Excel 模板文件路径
    templatePath: {
      type: String,
      default: "",
    },
  },
  methods: {
    // 文件上传成功
    onUploadSuccess(response, file, fileList) {
      console.log("[UploadDialog] 文件上传成功 response = ", response);
      this.$emit("uploaded", true, response, file, fileList);
      // this.$emit('update:visible',false)
    },
    // 文件上传失败
    onUploadError(err, file, fileList) {
      console.log("[UploadDialog] 文件上传失败 err = ", err);
      this.$emit("uploaded", false, err, file, fileList);
    },
  },
};
</script>

<style>
.el-upload__tip {
  font-size: 13px;
  text-align: center;
}
.btn-link {
  text-decoration: none;
  margin-left: 5px;
  color: #1890ff;
}
.el-dialog__body {
  padding-top: 0;
}
</style>